<script setup>

import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const chars = 'ABCDEFGHJKLMNOPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz0123456789';
const cap = ref('');
const loadCap = () => {
  cap.value = '';
  for (let i = 0; i < 4; i++) {
    const randomIndex = Math.floor(Math.random() * chars.length);
    cap.value += chars[randomIndex];
  }
};

onMounted(() => {
  loadCap();
});

const user = ref({
  username: '',
  password: '',
  email: '',
  phone: '',
});
const captcha = ref('');


const userReg = () => {

  if (user.value.username.trim() == '') {
    confirm('用户名不能为空');
    user.value = {
      username: '',
      password: '',
      email: '',
      phone: '',
    };
    captcha.value = '';
    loadCap();
  } else if (user.value.password.trim() == '') {
    confirm('密码不能为空');
    user.value = {
      username: '',
      password: '',
      email: '',
      phone: '',
    };
    captcha.value = '';
    loadCap();
  } else {

    if (cap.value.toLowerCase() === captcha.value.toLowerCase()) {
      let data = qs.stringify(user.value);
      axios.post(BASE_URL + '/v1/user/reg', data).then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success('注册成功，正在返回登录页');
          router.push('/login');
        } else {
          ElMessage.error(response.data.msg);
        }
      })
    } else {
      confirm('验证码错误');
      captcha.value = '';
      loadCap();
    }
  }
}


</script>

<template>
  <div
      style="background-image:url(/imgs/reg/regBackground.jpg);background-size: 100%;
      background-position: center;background-repeat: no-repeat;height: 100vh;">

    <div style="height: 100%;width: 100%;overflow: auto;">

      <div style="height:80px;width: 100%;background-color: #10B286;overflow: hidden;">
        <div style="color:#fff;margin:10px 20px;font-weight:bold;font-size:30px;font-family: '楷体';">
          达达旅游网
        </div>
      </div>

      <el-card style="width: 600px;margin: auto;margin-top: 6%;">
        <h3 style="text-align: center">新用户注册</h3>
        <el-form label-width="auto" style="width: 60%;margin: auto;font-weight: bold;">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input placeholder="请输入密码" type="password" v-model="user.password"
                      show-password="true"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="user.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="user.phone"></el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <el-row :gutter="10" style="width: 100%;">
              <el-col :span="16">
                <el-input placeholder="请输入验证码" v-model="captcha"></el-input>
              </el-col>
              <el-col :span="8">
                <div style="text-align: center;background-color: darkgray;color: yellow;font-weight: bold;
                       font-size: 1.1em;width: 60px;height: 30px;user-select:none;" @click="loadCap">
                  {{ cap }}
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button color="#10B286" style="width: 100%;font-weight: bold;" @click="userReg">注册</el-button>
          </el-form-item>
        </el-form>

        <div style="color: dodgerblue;text-decoration: underline;font-size: 10px;text-align: center;cursor: pointer;"
             @click="router.push('/login')">已有账号，点我返回登录页面
        </div>
      </el-card>

    </div>
  </div>
</template>

<style scoped>

</style>